<template>
  <li class="dataBaseTree">
    <span
      @click="toggle(data, $event)"
      v-if="data.name"
      :class="{ active: currentId == data.orgId }"
      style="width: 15rem;display: inline-block"
    >
      <!-- 加减 -->
      <i
        v-if="hasChild"
        class="iconfont"
        style="color:#5082d8"
        :class="open ? 'icon-jian' : 'icon-jiahao '"
      ></i>
      <i
        v-else
        class="iconfont"
        style="color: #5082d8"
        :class="!open ? 'icon-jiahao' : 'icon-jian '"
      ></i>
      {{ data.name }}
    </span>
  

    <ul v-for="(item, index) in data.children" :key="index">
      <TreeView v-show="open" :data="item" :if-open="ifOpen" :key="index"></TreeView>
    </ul>
  </li>
</template>

<script>
//import { queryAppPerson } from "@/service/getData";
import { getStore, getDefault } from "@/assets/config/mUtils";
import { Dialog, Toast } from "vant";
import {mapState, mapMutations} from 'vuex'
export default {
  name: "TreeView",
  //props:["data","ifOpen"],
  props: {
    data: {
      type: Object,
      default() {}
    },
    ifOpen: {
      type: Boolean,
      default: () => false
    }
  },
  data() {
    return {
      addParams: {
        label: "",
        children: []
      },
      noteData: {
        children: []
      },
      open: false,
      currentId: "",
      fopen: false
    };
  },
  created() {
    this.open = this.ifOpen;
    //        this.fopen = this.ifOpen;
  },
  mounted() {
    //console.log(this.ifOpen)
    //this.fopen = this.ifOpen;
  },
  computed: {
    hasChild() {
      return this.data.children && this.data.children.length;
    }
  },
  watch: {
    /* fopen:{
          handler(val,oldVal){
//            console.log(val,oldVal);
            this.fopen = this.ifOpen;
            if(val == true){
              this.open = val;
            }
          },
          deep:true //深度监听
          /!*console.log(val,oldVal);
          if(val == true){
            this.open = val;
          }*!/
        },*/
    ifOpen: function(val, oldVal) {
      this.fopen = val;
      this.open = val;
    }
  },
  methods: {
      ...mapMutations([
          'TREEITEM',
      ]),
    contactInfo(data) {
      // this.$router.push({name: 'ContactInfo', params: {detail: data}})
     
    }
    ,
    toggle(data, event) {


      // console.log(data);
      if (data.children&&data.children.length > 0) {
        if (this.hasChild) {
          /*if(data.children[0].pid&&data.name){
                  this.fopen = !this.fopen;
                }*/
          this.open = !this.open;
        }
      } else {
        this.open = true;
      }

      console.log('tree-data', data)
        //this.currentId = data.orgId;
       this.TREEITEM(data);
     // this.$emit('treeSelect',data)
      // if (data.pid == "-1" || data.pid == "101") {
      //   return true;
      // }
     
    },
    changeopen() {
      //console.log(this.ifOpen)
      this.open = this.ifOpen;
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../assets/style/mixin.scss";

.dataBaseTree {
  padding-left: 8px;
  line-height: 44px;
  font-size: 14px;
  ul {
    padding-left: 0%;
    line-height: 44px;
    li {
      span {
        display: inline-block;
        padding-left: 10%;
        height: 100%;
        width: 120%;
        //color: $titleColor;
        font-size: 14px;
        position: relative;
        cursor: pointer;
        &:hover {
          background: #edf0f5;

        }
        .folderIcon {
          color: #bcbcbc;
          position: absolute;
          top: -1px;
          left: 22px;
        }
      }
    }
  }
  li {
    position: relative;
    span {
      display: inline-block;
      padding-left: 40px;
      font-size: 14px;
      height: 100%;
      width: 120%;
      cursor: pointer;
      position: relative;
      right: 25px;
      top: -2px;
      color: #000;
      &:hover {
        background: #edf0f5;
      }
      .titleIcon {
        color: #c3c3c3;
        font-size: 16px;
        position: absolute;
        top: 12px;
        left: 16px;
      }
      .folderIcon {
        color: #bcbcbc;
        position: absolute;
        top: -1px;
        left: 22px;
      }

      
    }
    .active {
      background: #e75a5a;
    }
  }
  .person {
      .name {
        font-size: 14px;
        //color: $titleColor;
        display: inline-block;
       vertical-align: middle;

      }

      .dept {
        font-size: 12px;
        margin-left: 16px;
        //color: $subtitleColor;
        display: inline-block;
       vertical-align: middle;

      }

  }
}
.photo {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  // float: left;
  // margin-top: 8px;
  margin-right: 3px;
  vertical-align: middle;

}

</style>
